<template>
  <div class="navigate">
    <div>

    </div>
    <Affix>
      <div :class="[themeClass + ' navigate-box ' ]">
        <Menu mode="horizontal" class="navigate-menu" :theme="theme" active-name="2" @on-select="handle">
          <Menu-item name="1">
            <div class="logo-rotate">
              <img src="../assets/logo.png" alt="弘源土特产商行" class="animated zoomInLeft" @click="animate = true">
            </div>
          </Menu-item>
          <Menu-item name="2">
            <Icon type="ios-paper" size="14"></Icon>
            首页
          </Menu-item>
          <Menu-item name="3">
            <Icon type="ios-people" size="14"></Icon>
            黑木耳
          </Menu-item>
          <Menu-item name="4">
            <Icon type="ios-people" size="14"></Icon>
            蘑菇
          </Menu-item>
          <Menu-item name="5">
            <Icon type="ios-people" size="14"></Icon>
            人参
          </Menu-item>
          <Menu-item name="6">
            <Icon type="ios-people" size="14"></Icon>
            坚果
          </Menu-item>
          <Submenu name="7">
            <template slot="title">
              <Icon type="stats-bars" size="14"></Icon>
              山货
            </template>
            <Menu-group title="野菜">
              <Menu-item name="7-1">山芹菜</Menu-item>
              <Menu-item name="7-2">山蕨菜</Menu-item>
            </Menu-group>
            <Menu-group title="天然药材">
              <Menu-item name="7-3">五味子</Menu-item>
              <Menu-item name="7-4">枸杞</Menu-item>
              <Menu-item name="7-5">蜂蜜</Menu-item>
              <Menu-item name="7-6">灵芝孢子粉</Menu-item>
            </Menu-group>
          </Submenu>
          <Menu-item name="8" style="height:100%">
            <Input class="search-box" placeholder="你想找点什么..." type="text" v-model="content" :value="content">
            <Button slot="append" icon="search" @click="search"></Button>
            </Input>
          </Menu-item>
          <Menu-item name="9">
            <Icon type="person"></Icon>
            登录/注册
          </Menu-item>
        </Menu>
      </div>
    </Affix>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
    name: 'navigate-div',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        show: true,
        content: '',
        themeClassName: ''
      }
    },
    methods: {
      gets () {
        this.show = !this.show
      },
      handle (name) {
        switch (name) {
          // 首页
          case '2':
            this.$router.push('/index')
            break
          case '3':
            this.$router.push('/detail')
            break
          case '9':
            // 登录/注册
            this.$router.push('/login')
            break
        }
      },
      search () {
        if (!this.content) {
          this.$Message.error('你还没有输入查询的内容呢!')
        }
        // TODO 点击输入框开始搜索
      }
    },
    computed: {
      ...mapGetters(['theme', 'themeClass'])
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
  backGroundColor-dark = #1c2438
  backGroundColor-light = #fff
  backGroundColor-primary = #2d8cf0

  .theme-dark {
    background: backGroundColor-dark
  }

  .theme-light {
    background: backGroundColor-light
  }

  .theme-primary {
    background: backGroundColor-primary
  }

  .navigate {
    width: 100%
    height: 60px

  }

  .navigate-box {
    width: 100%
    height: 60px
  }

  .navigate-menu {
    max-width: 1200px
    margin: 0 auto;
    li:last-child {
      float: right
    }
  }

  .logo-rotate {
    height: 60px
    img {
      width: 100px;
      height: 60px;
      vertical-align middle
    }
  }

  div.search-box {
    top: 15px
    padding: 0 20px
    button {
      animation my-shake 1s alternate infinite
      &:hover {
        color: #19be6b
      }
    }
  }

  @keyframes my-shake {
    from {
      transform: scale(1)
    }
    to {
      transform: scale(1.5)
    }
  }

</style>
